<template>
	<div class="product-list h-panel">
		<div class="h-panel-bar">
			<span class="h-panel-title">产品管理</span>
			<div class="h-panel-right">
				<Button color="primary" @click="doEdit(0)"><span class="icon tianjia1"></span> 新增产品</Button>
			</div>
		</div>
		<div class="h-panel-bar">
			<div class="search-filter-wrap">
				<span class="search-picker-title">搜索</span>
				<Search :width="400" v-model="filter.keyword" @search="doSearch()" showSearchButton></Search>
			</div>
			<div class="search-picker" v-if="cate.length > 0">
				<CateFilter v-model="filter.cate_id" :datas="cate" @input="changeCate()"></CateFilter>
			</div>
			<div class="search-picker" v-if="dataForms.length > 0">
				<SearchFilter v-for="(item,index) in dataForms" :key="index" v-model="filter.form" :prop="item.field" :multiple="item.multiple" :datas="item.datas" @input="getData()" :title="item.name"></SearchFilter>
			</div>
			<div class="search-filter-wrap">
				<span class="search-picker-title">显示字段</span>
				<div style="display: flex;align-items: center;">
					<Checkbox :datas="tableField" v-model="tableShow"></Checkbox>
				</div>
			</div>
		</div>
		<div class="h-panel-body">
			<Table :loading="loading" :datas="datas">
				<TableItem v-if="$global.inArray(tableShow,'id')" :width="80" prop="id" align="center" title="编号"></TableItem>
				<TableItem v-if="$global.inArray(tableShow,'name')" :width="150" prop="name" align="center" title="名称"></TableItem>
				<TableItem v-if="$global.inArray(tableShow,'pic')" :width="120" align="center" title="主图">
					<template slot-scope="{data}">
						<img :src="data.pic" class="tableimg" @click="$ImagePreview(data.pic)" @error="$imageError">
					</template>
				</TableItem>
				<TableItem v-if="$global.inArray(tableShow,'cate_id')" :width="100" align="center" title="类目">
					<template slot-scope="{data}">
						{{$global.getArrayName(cate,data.cate_id)}}
					</template>
				</TableItem>
				<TableItem v-if="$global.inArray(tableShow,'price')" :width="100" prop="price" align="center" title="参考价"></TableItem>
				<TableItem v-if="$global.inArray(tableShow,'form->'+item.field)" :width="(item.type == 'textarea' || item.type == 'tree') ? 250 : 150" v-for="(item,index) in dataForms" :key="index" align="center" :title="item.name">
					<template slot-scope="{data}">
						<TableForm v-model="data" :form="item"></TableForm>
					</template>
				</TableItem>
				<TableItem v-if="$global.inArray(tableShow,'hits')" :width="100" prop="hits" align="center" title="点击量"></TableItem>
				<TableItem v-if="$global.inArray(tableShow,'rank')" :width="100" prop="rank" align="center" title="权重"></TableItem>
				<TableItem v-if="$global.inArray(tableShow,'enable')" :width="100" align="center" title="上下架">
					<template slot-scope="{data}">
						{{data.status == 1 ? '已上架' : '已下架'}}
					</template>
				</TableItem>
				<TableItem v-if="$global.inArray(tableShow,'create_time')" :width="150" align="center" title="创建时间">
					<template slot-scope="{data}">
						{{$global.getDateTime(data.create_time)}}
					</template>
				</TableItem>
				<TableItem v-if="$global.inArray(tableShow,'update_time')" :width="150" align="center" title="修改时间">
					<template slot-scope="{data}">
						{{$global.getDateTime(data.update_time)}}
					</template>
				</TableItem>
				<TableItem v-if="$global.inArray(tableShow,'edit')" :width="100" align="center" title="操作" fixed="right">
					<template slot-scope="{data}">
						<button class="h-btn h-btn-s h-btn-blue" title="编辑" @click="doEdit(data.id)"><i class="icon bianji"></i></button>
						<button class="h-btn h-btn-s h-btn-red" title="删除" @click="doDelete(data.id)"><i class="icon shanchu"></i></button>
					</template>
				</TableItem>
			</Table>
			<p></p>
			<Pagination v-if="pagination.total>0"  align="right" v-model="pagination" @change="getData(false)" />
		</div>
		<Modal v-model="openEdit" :closeOnMask="false">
			<Edit @close="openEdit=false" :id="id" :cate="cate" :cate_id="filter.cate_id"></Edit>
		</Modal>
	</div>
</template>

<script>
import TableForm from '@/components/table-form'
import Edit from './edit'
export default {
	components : {
		Edit,
		TableForm
	},
	data() {
		return {
			tableInfo : [
				{name:'编号',id:'id'},
				{name:'名称',id:'name'},
				{name:'图片',id:'pic'},
				{name:'类目',id:'cate_id'},
				{name:'参考价',id:'price'},
				{name:'热度',id:'hits'},
				{name:'权重',id:'rank'},
				{name:'上下架',id:'enable'},
				{name:'创建时间',id:'create_time'},
				{name:'更新时间',id:'update_time'},
				{name:'操作',id:'edit'}
			],
			tableShow : [],
			id : 0,
			openEdit : false,
			pagination: {
				page : 1,
				size : 20,
				total : 0
			},
			cate: [],
			dataForms: [],
			filter: {
				form:{},
				keyword:'',
				cate_id: 0
			},
			datas: [],
			loading: false
		};
	},
	computed: {
		tableField() {
			let tableInfo = [].concat(this.tableInfo)
			this.dataForms.forEach(v=>{
				tableInfo.push({name:v.name,id:'form->'+v.field})
			})
			let tableShow = []
			tableInfo.forEach(v=>{
				tableShow.push(v.id)
			})
			this.tableShow = tableShow
			return tableInfo
		}
	},
	mounted() {
		this.create()
	},
	methods: {
		async create() {
			this.loading = true
			this.cate = await this.$api('GET','cate')
			this.loading = false
			this.getData()
		},
		getFormValues(datas,value) {
			let data = this.$global.getArrayName(datas,value)
			if(Array.isArray(data)){
				return data
			}else{
				return data ? [data] : []
			}
		},
		doSearch (){
			this.filter.cate_id = 0
			this.filter.form = {}
			this.getData()
		},
		changeCate(){
			this.filter.keyword = ''
			this.filter.form = {}
			this.dataForms = []
			this.cate.forEach((citem,cindex) => {
				if(citem.id == this.filter.cate_id && citem.form_id > 0){
					this.dataForms = this.$global.getArrayById(this.$global.config.forms,citem.form_id,'data')
				}
			})
			this.getData()
		},
		async getData(reload = true) {
			this.loading = true
			if (reload) {
				this.datas = []
				this.pagination.page = 1
			}
			let data = await this.$api('GET','product',Object.assign(this.filter,{page:this.pagination.page,pageSize:this.pagination.size}))
			if(data){
				this.datas = data.data
				this.pagination.total = data.total
			}
			this.loading = false
		},
		doEdit (id){
			this.id = id
			this.openEdit = true
		},
		async doDelete (id,istrue=false){
			if(istrue){
				let res = 0
				res = await this.$api('DELETE','product/'+id)
				if(res){
					this.datas.forEach((item,index) => {
						if(item.id == id){
							this.datas.splice(index,1)
						}
					})
				}
			}else{
				this.$Confirm('确定删除？').then(() => {
					this.doDelete(id,true)
				}).catch(() => {})
			}
		}
	}
};
</script>

<style lang='less'>
	.hideTD{
		display: none;
	}
	.product-list{
		.main{
			display: flex;
			.left{
				width: 200px;
			}
			.right{
				width: 100%;
			}
		}
	}
</style>